<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>图文列表16</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/public.css">

   <style>
      .imgText_list{
         background-color: var(--c_b_dark);
      }
      .imgText_list_list{
         margin-top: 80px;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      .imgText_list_list li{
         padding: 0 0.57%;
         flex: 0 0 25%;
         max-width: 25%;
      }
      .imgText_list_box{
         height: 100%;
         padding: 80px 0 0;
         background-color: #fff;
         position: relative;
      }
      .imgText_list_img{
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         margin: auto;
         transform: translateY(-50%);
         width: 80%;
         height: 160px;
         overflow: hidden;
      }
      .imgText_list_img img{
         width: 100%;
         height: 100%;
         object-fit: cover;
         transform: scale(1.1);
         transition: 0.5s;
      }
      .imgText_list_box:hover .imgText_list_img img{
         transform: scale(1);
      }
      .imgText_list_img:hover img{
         transform: scale(1);
      }
      .imgText_list_text{
         padding: 30px 10px;
         text-align: center;
      }
      .imgText_list_text h3{
         font-size: var(--f_text);
         line-height: var(--l_text);
         color: var(--c_text);
      }
      .imgText_list_text p{
         font-size: var(--f_describe);
         line-height: var(--l_describe);
         color: var(--c_subtitle);
      }
      .imgText_list .button_small{
         margin: 20px auto 0;
      }
      @media (max-width:1200px) {
         .imgText_list_list li{
            padding: 0;
         }
         .imgText_list_img{
            height: 140px;
         }
      }
      @media (max-width:991px) {
         .imgText_list_img{
            height: 115px;
         }
      }
      @media (max-width:768px) {
         .imgText_list_list li{
            padding-top: 80px;
            padding-bottom: 20px;
            flex: 0 0 100%;
            max-width: 350px;
         }
         .imgText_list_list li:last-child{
            padding-bottom: 0px;
         }
         .imgText_list_list{
            margin-top: 0px;
         }
         .imgText_list_img{
            height: 160px;
         }
      }
      @media (max-width: 390px) {
         .imgText_list_list li{
            max-width: 100%;
         }
      }
   </style>
   <script src="../js/jquery-3.5.1.min.js"></script>
</head>

<body>
   <div class="imgText_list modular title_center">
      <div class="public_width">
         <div class="public_title">
            <h2>展览服务</h2>
            <p>Exhibition Service</p>
         </div>
         <ul class="imgText_list_list">
            <li>
               <div class="imgText_list_box">
                  <div class="imgText_list_img">
                     <img src="https://22457905.s61i.faiusr.com/2/AD0IsdzaChACGAAg5Kqo8wUow8iWvAIw3wU4uQM.jpg.webp" alt="">
                  </div>
                  <div class="imgText_list_text">
                     <h3>空间展示设计</h3>
                     <p>
                        为客户设计并搭建个性化营销型展台
                        <br>
                        我们是体验经济世界的构筑者
                     </p>
                     <a class="button_small" href="">了解详情</a>
                  </div>
               </div>
            </li>
            <li>
               <div class="imgText_list_box">
                  <div class="imgText_list_img">
                     <img src="https://22457905.s61i.faiusr.com/2/AD0IsdzaChACGAAg8a2o8wUo_NzrMDDfBTi5Aw.jpg.webp" alt="">
                  </div>
                  <div class="imgText_list_text">
                     <h3>展厅展台搭建</h3>
                     <p>
                        引进国际先进的生产设备
                        <br>
                        保障专业化、标准化、模块化的生产
                     </p>
                     <a class="button_small" href="">了解详情</a>
                  </div>
               </div>
            </li>
            <li>
               <div class="imgText_list_box">
                  <div class="imgText_list_img">
                     <img src="https://22457905.s61i.faiusr.com/2/AD0IsdzaChACGAAg8a2o8wUojtOmwwcw3wU4uQM.jpg.webp" alt="">
                  </div>
                  <div class="imgText_list_text">
                     <h3>活动策划执行</h3>
                     <p>
                        为客户定制一整套策划方案以及现场执行协调工作
                        <br>
                        我们高效执行为您提供完美的用户体验
                     </p>
                     <a class="button_small" href="">了解详情</a>
                  </div>
               </div>
            </li>
         </ul>
      </div>
   </div>
</body>
<script>
   $(function () {
      imgText_list_16()
    })
    $(window).resize(function () {
      imgText_list_16()
    })
    //控制图片高度等于文本高度
    function imgText_list_16() {
        if (document.body.clientWidth > 768) {
            $(".imgText_list_list li").css("height", "auto")
            var imgText_list_list = $(".imgText_list_list").height()
            $(".imgText_list_list li").css("height", imgText_list_list)
        } else {
            $(".imgText_list_list li").css("height", "auto")
        }
    }
</script>
</html>